<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	  layout:decorate="layout">
	<head th:include="include/common::common"></head>
		<link th:href="@{/css/timeline/timeline.css}" rel="stylesheet">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>时间轴</title>
	</head>
	<!-- skin-blue 为 AdminLTE 的主题颜色 可选颜色主题：/res/dist/css/skins-->
	 <body class="hold-transition skin-blue sidebar-mini">
	<!--<body class="hold-transition skin-green-light sidebar-mini">-->
		<div class="wrapper">
			<!--header-->
			<div th:include="include/header"></div>
			<!--menu-->
			<aside th:include="include/menu"/>
			<!-- Left side column. contains the logo and sidebar -->
			<!-- Content Wrapper. Contains page content -->
			<div class="content-wrapper">
				<!--<section class="content-header">
					&lt;!&ndash; 路径导航 &ndash;&gt;
					<a href="${path}/home"><i class="fa fa-home"></i> 主页</a> > 
				</section>-->
				<!-- Main content -->
				<section class="content">
					<div class="row-fluid"></div>
					<div class="row">
						<div class="col-xs-12">
							<div class="box2">
								<!--<ul class="event_year">-->
									<!--<li class="current"><label for="2013">2013</label></li>-->
									<!--<li><label for="2012">2012</label></li>-->
								<!--</ul>-->
								<!--<ul class="event_list">-->
									<!--<div>-->
										<!--<h3 id="2013">2013</h3>-->
										<!--<li>-->
											<!--<span>5月</span>-->
											<!--<p><span>文字信息</span></p>-->
										<!--</li>-->
										<!--<li>-->
											<!--<span>4月</span>-->
											<!--<p><span>文字信息，文字信息</span></p>-->
										<!--</li>-->
										<!--<li>-->
											<!--<span>3月</span>-->
											<!--<p><span>文字信息</span></p>-->
										<!--</li>-->
									<!--</div>-->
									<!--<div>-->
										<!--<h3 id="2012">2012</h3>-->
										<!--<li>-->
											<!--<span>9月</span>-->
											<!--<p><span>文字信息</span></p>-->
										<!--</li>-->
									<!--</div>-->
								<!--</ul>-->
								<div class="clearfix"></div>
							</div>
						</div>
					</div>
						<!-- /.col -->
					<!-- /.row -->
				</section>
			</div>
			<!--footer-->
			<div th:include="include/footer"></div>
			<div class="control-sidebar-bg"></div>
		</div>

		<script>
			$(function () {
			    var box2 = $('.box2');
			    var event_year = $('<ul class="event_year"></ul>');
			    var event_list = $('<ul class="event_list"></ul>');
			    $.ajax({
					type: 'GET',
					async: false,
					url: '/statistics/timelist',
					success: function (data) {
						var map = data.data;
                        var count = 0;

						var years = [];
                        $.each(map, function (key, list) {
							years.push(key);
                        });
                        years.sort(function (a, b) {
							return b-a;
                        });
                        $.each(years, function (index, key) {
							var list = map[key];

                            var event_year_li;
                            if (count == 0) {
                                event_year_li = '<li class="current"><label for="'+key+'">'+key+'</label></li>';
                            } else {
                                event_year_li = '<li><label for="'+key+'">'+key+'</label></li>';
                            }
                            event_year.append(event_year_li);

                            var div = $('<div><h3 id="'+key+'">'+key+'</h3></div>');
                            $.each(list, function (index, diary) {
                                var wd = millisecondToDate(diary.writeDate, format4);
                                var kw;
                                if (diary.isLock == 1) kw = '已锁定'; else kw = base64Decoder(diary.keyword);
                                var event_list_li = '<li><span>' + wd + '</span><p><span>' + kw + '</span></p></li>';
                                div.append(event_list_li);
                            });
                            event_list.append(div);
                            box2.append(event_year);
                            box2.append(event_list);
                            count++;
                        });

						/*$.each(map, function (key, list) {
                            var event_year_li;
                            if (count == 0) {
                                event_year_li = '<li class="current"><label for="'+key+'">'+key+'</label></li>';
                            } else {
                                event_year_li = '<li><label for="'+key+'">'+key+'</label></li>';
                            }
                            event_year.append(event_year_li);

                            var div = $('<div><h3 id="'+key+'">'+key+'</h3></div>');
							$.each(list, function (index, diary) {
							    var wd = millisecondToDate(diary.writeDate, format4);
							    var kw;
							    if (diary.isLock == 1) kw = '已锁定'; else kw = base64Decoder(diary.keyword);
								var event_list_li = '<li><span>' + wd + '</span><p><span>' + kw + '</span></p></li>';
								div.append(event_list_li);
                            });
							event_list.append(div);
							box2.append(event_year);
							box2.append(event_list);
							count++;
                        });*/
                    }
				});

				$('label').click(function () {
					$('.event_year>li').removeClass('current');
					$(this).parent('li').addClass('current');
					var year = $(this).attr('for');
					$('#' + year).parent().prevAll('div').slideUp(800);
					$('#' + year).parent().slideDown(800).nextAll('div').slideDown(800);
				});
			});
			
			function sortMap(map) {
				var max = 0;
				var resMap = {};
				$.each(map, function(key, value) {
				    if (max < key) {
				        max = key;
					}
				});
            }
		</script>
		<!-- Sidebar toggle button 菜单收缩功能 -->
		<script th:src="@{/res/dist/js/app.min.js}" type="text/javascript"></script>
	</body>
</html>
